<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<jsp:include page="inshead.jsp"></jsp:include>

<script type="text/javascript">
	function chock() {
		var Time = new Date();
		document.getElementById("timer").innerHTML = Time.toLocaleString();
		setTimeout("chock()", 1000);
	}
</script>
</head>
<body class="easyui-layout" data-options="border:false" onload="chock()">
	<div data-options="region:'north' " style="height:10%;">
		<div style="text-align: right;">
			<div id=timer></div>
			&nbsp;&nbsp;
			<s:set name="user" value="#session.user"></s:set>
			<s:property value="#user.username" />
		</div>
		<div style="text-align: left;">
			&nbsp;&nbsp; 订单号：
			<div id=saleorderid></div>
		</div>
	</div>
	<div class="easyui-layout" data-options="region:'east',border:false"
		style="width:30%;">
		<div data-options="region:'center'">

			<table id="grid"></table>


		</div>
		<div data-options="region:'south'" style="height:30%;">

			<div class="salecontainer">
					<div id="middle">总额：</div>
					<div id="left">优惠：</div>
					<div id="right">折后：</div>
				</div>

			<button onclick="beginNewSale()">开始新订单</button>
			<button onclick="endNewSale()">收款</button>


		</div>
	</div>
	<div class="easyui-layout" data-options="region:'center',border:false">
		<div class="easyui-layout" data-options="region:'north',border:false"
			style="height:20%;">
			<div data-options="region:'center'">
				商品名：<input id="keyword" type="text"> <input type="button"
					value="搜索" onclick="getProductList()">
			</div>
			<div data-options="region:'east'" style="width:50%;">
				顾客卡号：<input id="memberId" type="text"> <input type="button"
					value="确定" onclick="ensureMember()"><br>

				<div id="memberInfo"></div>

			</div>
		</div>
		<div data-options="region:'center'">
			<div id="saletable"></div>
		</div>
	</div>
	
	<div id="dialog" class="easyui-dialog" data-options="closed:true"
		title="产品类别管理" style="width:210px;height:280px;text-align:center">
		<form id="form" method="post">
			<!--<input type="hidden" name="id"/>-->
			<div>
				<label>餐台</label><input id="tableplateNum" name="tableplate.id">
				<script type="text/javascript">
					$('#tableplateNum').combobox({
						fitColumns : true,
						required : true,
						editable : false,
						valueField : 'id',
						textField : 'tablePlate',
						url : mis.path + '/tableplate!combogrid.action'
					});
					
					$.extend($.fn.validatebox.defaults.rules, {
						dGiveRex: {
						    validator: function(value){
							    return value>0;
						    },
						    message: '钱不够'
						  }
						});
				</script>
			</div>
			<div>
				<label>应收</label> <input id="dRealIncome"
					class="easyui-numberbox" data-options="required:true,min:0,precision:2" />
			</div>
			<div>
				<label>现金</label> <input id="dReceive"
					class="easyui-numberbox" data-options="required:true,min:0,precision:2" />
			</div>
			<div>
				<label>找零</label> <input id="dGive"
				data-options="required:true,min:0,precision:2,validType:'dGiveRex'" class="easyui-numberbox" />
			</div>
			
		</form>
	</div>
	
</body>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/productAction.js"></script>
<script type="text/javascript" src="dwr/interface/saleorderAction.js"></script>

<script type="text/javascript">
/* 显示Dialog*/
	function openDialog(title) {	
		 $('#tableplateNum').combobox('reload');
		$("#dialog").dialog({
			top:($(document).scrollTop() + ($(document).height()-$("#dialog").height()) )* 0.5,
			left:  ($(document).width()-$("#dialog").width())* 0.5,
			resizable : false,
			modal : true,
			buttons : [ { //设置下方按钮数组
				text : '确定',
				iconCls : 'icon-save',
				handler : function() {
					commitDialog();
				}
			}, {
				text : '取消',
				iconCls : 'icon-cancel',
				handler : function() {
					closeDialog();
				}
			} ]
		});
		$("#dialog").dialog('setTitle', title);
		$("#dialog").dialog('open');
	}
	/* 关闭Dialog*/
	function closeDialog() {
		$("#form").form('clear'); // 清空form的数据
		$("#dialog").dialog('close');// 关闭dialog
	}
	
	function commitDialog() {
		$('#form').form('submit', {
			onSubmit : function() {
				return $(this).form('validate'); //前台字段格式校验
			},
			success : function(result) {
				var r = $('#tableplateNum').combobox('getValue');
				saleorderAction.endNewSale(r,callBackMethod4);
				closeDialog();
			}
		});
	}
	
</script>


<script id="entry-template6" type="text/x-handlebars-template">    
    {{#list product}} {{id}} {{productId}} {{productName}} {{productPrice}} {{/list}}
</script>
<script id="entry-template7" type="text/x-handlebars-template">    
    {{#list member}} {{id}} {{memberId}} {{name}} {{gender}}{{telephone}}{{address}}{{mpermissionName}} {{/list}}
</script>
<script id="entry-template8" type="text/x-handlebars-template">    
    {{#list salemoney}} {{amount}} {{discount}} {{realIncome}} {{/list}}
</script>
<script type="text/javascript">
	function ensureMember() {
		var memberId = eval(document.getElementById('memberId')).value;
		saleorderAction.ensureMember(memberId, callBackMethod5);
	}

	function callBackMethod5(dataList) {
		if (dataList == null) {
			alert("该卡号不存在");
			document.getElementById("memberInfo").innerHTML = "";
		} else {
			var context = JSON.parse(dataList);

			Handlebars.registerHelper('list', function(items, options) {
				var out = "<ul>";

				for (var i = 0, l = items.length; i < l; i++) {
					out = out + "<label>卡号：" + items[i].memberId
							+ "</label><br>" + "<label>姓名：" + items[i].name
							+ "</label><br>" + "<label>等级："
							+ items[i].mpermissionName + "</label><br>"
							+ "<label>手机号：" + items[i].telephone
							+ "</label><br>" + "<label>地址：" + items[i].address
							+ "</label>";
				}

				return out + "</ul>";
			});

			var source = $("#entry-template7").html();
			var template = Handlebars.compile(source);
			var html = template(context);
			document.getElementById("memberInfo").innerHTML = html;
		}
		
		document.getElementById("saleorderid").innerHTML = "";
		eval(document.getElementById('memberId')).value = "";
		
		document.getElementById("middle").innerHTML="总额：";
		document.getElementById("left").innerHTML="优惠：";
		document.getElementById("right").innerHTML="折后：";
		$('#grid').datagrid('reload');
	}

	function endNewSale() {
		var oldStr=document.getElementById("right").innerHTML;
		openDialog("收款");	
		$("#dRealIncome").numberbox('setValue',oldStr.substring(3, oldStr.length));
		
	}

	function callBackMethod4() {
		document.getElementById("saleorderid").innerHTML = "";
		document.getElementById("memberInfo").innerHTML = "";
		eval(document.getElementById('memberId')).value = "";
		document.getElementById("middle").innerHTML="总额：";
		document.getElementById("left").innerHTML="优惠：";
		document.getElementById("right").innerHTML="折后：";
		$('#grid').datagrid('reload');
	}

	function beginNewSale() {
		saleorderAction.beginNewSale(callBackMethod3);
	}

	function callBackMethod3(saleorderid) {
		document.getElementById("saleorderid").innerHTML = saleorderid;
		document.getElementById("middle").innerHTML="总额：";
		document.getElementById("left").innerHTML="优惠：";
		document.getElementById("right").innerHTML="折后：";
		$('#grid').datagrid('reload');
	}

	function addProductItem(id) {
		saleorderAction.addProductItem(id, callBackMethod2);
	}

	function callBackMethod2(str) {
		var context = JSON.parse(str);
			Handlebars.registerHelper('list', function(items, options) {
				for (var i = 0, l = items.length; i < l; i++) {
				document.getElementById("middle").innerHTML="总额："+items[i].amount;
				document.getElementById("left").innerHTML="优惠："+items[i].discount;
				document.getElementById("right").innerHTML="折后："+items[i].realIncome;
				}
				return "";
			});

			var source = $("#entry-template8").html();
			var template = Handlebars.compile(source);
			var html = template(context);
		
		$('#grid').datagrid('reload');
	}

	function getProductList() {
		var keyword = eval(document.getElementById('keyword')).value;
		productAction.getProducts(keyword, callBackMethod);
	}
	function callBackMethod(dataList) {
		var context = JSON.parse(dataList);

		Handlebars.registerHelper('list', function(items, options) {
			var out = "<ul>";

			for (var i = 0, l = items.length; i < l; i++) {
				out = out + "<button id=" + items[i].id
						+ " onclick='addProductItem(" + items[i].id + ")' >"
						+ items[i].productId + "   " + items[i].productName
						+ "   " + items[i].productPrice + "</button>";
			}

			return out + "</ul>";
		});

		var source = $("#entry-template6").html();
		var template = Handlebars.compile(source);
		var html = template(context);
		document.getElementById("saletable").innerHTML = html;
	}
	/* jquery入口*/
	$(function() {
		loadgrid(); 
		$("#dReceive").numberbox({onChange:function(){
          $("#dGive").numberbox('setValue',  $('#dReceive').numberbox('getValue') - $('#dRealIncome').numberbox('getValue') );
        }});
       $(".datebox :text").attr("readonly","readonly");
	});

	/* 加载datagrid列表*/
	function loadgrid() {
		$('#grid').datagrid({
			url : mis.path + '/saleorder!getSaleorderitems.action', //'datagridData.json',
			loadMsg : '正在加载…', //当从远程站点载入数据时，显示的一条快捷信息。
			fit : true, //窗口自适应
			nowrap : false, //设置为true，当数据长度超出列宽时将会自动截取
			fitColumns : true, // 自动适应列宽								
			singleSelect : true, // 每次只选中一行
			sortName : 'productId', //默认排序字段
			sortOrder : 'asc', // 升序asc/降序desc
			striped : true, // 隔行变色  
			pagination : true, // 在底部显示分页工具栏
			pageNumber : 1, //初始化页码 
			pageSize : 20, // 指定每页的大小，服务器要加上page属性和total属性
			pageList : [ 20, 30, 50 ], // 可以设置每页记录条数的列表，服务器要加上rows属性
			//rownumbers : true, // 在最前面显示行号 
			idField : 'id', // 主键属性
			// 冻结列,当很多咧出现滚动条时该列不会动
			frozenColumns : [ [ {
				title : '产品编号',
				width : '50',
				field : 'productId',
				sortable : true
			}, {
				title : '产品名称',
				width : '100',
				field : 'productName',
				sortable : true
			}, {
				title : '产品价格',
				width : '50',
				field : 'productPrice',
				sortable : false
			}, {
				title : '数量',
				width : '40',
				field : 'count',
				sortable : false
			} ] ],
		});
	}
</script>
<style>
.salecontainer {
	display: -webkit-box;
	display: -moz-box;
}

div:not (.container ){
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #999;
	border: #00C 2px solid;
}

#left,#right,#middle {
	width: 33%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 20px;
}


#right {
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
}
</style>
</html>